import { Button, Form, Input, Spin, message } from 'antd';
import "../../css/login.css"
import { CheckLogins, logins } from '../../api/login';
import { setToken } from '../../utils/auth';
import { useNavigate } from 'react-router-dom';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import "../../css/iconfont.css"
import { useState } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
const Login = () => {
    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const onFinish = (val) => {
        setLoad(true);
        const bindData = async () => {
            const res = await logins(val);
            console.log(res, "fjmksgdfkjsdfgkjsdkjjksdgkjngdskjmn");
            if (res?.result === 0) {
                setToken(res.data.token);
                const checkLogins = async () => {
                    const res = await CheckLogins();
                    return res
                }
                checkLogins().then((res) => {
                    console.log(res, "fsdkjsgijohjosidfgjiosdfgjo");
                    setLoad(false)
                    if (res.result === 0) {
                        navigate("/");
                    }
                })

            } else {
                setLoad(false);
                messageApi.open({
                    type: 'error',
                    content: res.message,
                });
            }
        }
        bindData();
    }
    const [isLoad, setLoad] = useState(false);

    return (
  
        <div className='box'>
            {contextHolder}
            <div className='login-top'>
              <div className='login-logo'>
                   <div>
                    
                       {/* <div className='login-logo-left'>
                             
                       </div> */}
                       {/* <div className='login-logo-left_name'> 旗下</div> */}
                   </div>
              </div>
              <div>
                  <div style={{marginLeft:60}}>
                  {/* <div className='data-name'>小</div>
                <div className='data-name'>杨</div>
                <div className='data-name'>科</div>
                 <div className='data-name'>技</div>
                 <div className='data-name'>商</div>
                 <div className='data-name'>超</div>
                  <div className='data-name'>管</div>
                 <div className='data-name'>理</div>
                 <div className='data-name'>系</div>
                 <div className='data-name'>统</div> */}
                                <div className='data-name' style={{fontSize:28}}>
                                    农贸商业供货系统</div>
                {/* <div className='data-name'>杨</div>
                <div className='data-name'>科</div>
                 <div className='data-name'>技</div>
                 <div className='data-name'>商</div>
                 <div className='data-name'>超</div>
                  <div className='data-name'>管</div>
                 <div className='data-name'>理</div>
                 <div className='data-name'>系</div>
                 <div className='data-name'>统</div> */}
                  </div>
              </div>
            </div>
            <div className='Logins'>
                
                <div className="login_title">
                    {/* 登录 */}
                    账号登录
                </div>

                <div className='login_content'>

                    <Form
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="account"

                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号',
                                },
                            ]}
                        >
                            <Input placeholder='账号' prefix={<UserOutlined />} />
                        </Form.Item>

                        <Form.Item
                            name="password"

                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        >
                            <Input.Password placeholder='密码' prefix={<LockOutlined />} />
                        </Form.Item>



                        <Form.Item
                            wrapperCol={{
                                offset: 0,
                                span: 24,
                            }}
                        >
                            <Spin spinning={isLoad} fullscreen
                                indicator={
                                    <LoadingOutlined
                                        style={{
                                            fontSize: 30,
                                        }}
                                        spin
                                    />
                                } />
                            <Button type="primary" htmlType="submit" style={{ width: "100%", marginTop: "10px" }}>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>

        </div>
    )
}

export default Login